<template>
  <div class="page">
    <div class="mockup-window border bg-base-300 relative">
      <!-- <div class="absolute top-2 right-5 text-xl font-bold">
        学号：{{ userId }}
      </div> -->
      <div class="flex px-10 py-16 bg-base-200 h-[80vh]">
        <div v-if="question">
          <div class="text-3xl font-bold">{{ question.questionTitle }}</div>
          <a-radio-group v-model="value" direction="vertical">
            <div class="mt-10 pl-5">
              <a-radio
                class="mt-5 text-xl"
                v-for="(key, index) in Object.keys(question.options)"
                :value="key"
              >
                <div class="">
                  <span v-if="question.type === 'SELECT'"
                    >{{ String.fromCharCode(65 + parseInt(key)) }}.
                  </span>
                  <span>{{
                    question.type === "SELECT"
                      ? question.options[key]
                      : index === 0
                      ? "F（错）"
                      : "T（对）"
                  }}</span>
                </div>
              </a-radio>
            </div>
          </a-radio-group>
          <div class="mt-20">
            <a-button @click="sendMessage(value)" type="primary">{{
              hasSubmit ? "重新提交" : "提交"
            }}</a-button>
          </div>
        </div>
      </div>
    </div>

    <a-modal
      v-model:visible="visible"
      title="登录"
      @cancel="handleCancel"
      @before-ok="handleBeforeOk"
    >
      <a-form :model="form">
        <a-form-item
          field="userId"
          label="学号"
          :rules="[{ required: true, message: '输入学号' }]"
        >
          <a-input v-model="form.userId" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { getQuestionById } from "@/apis/question";
import { saveAnswer } from "@/apis/answer";
import { useRoute } from "vue-router";
import { Message } from "@arco-design/web-vue";

const connection = ref({});

const value = ref("");

const userId = ref(new Date().getTime());

const visible = ref(false);

const form = reactive({
  userId: "",
});

const handleBeforeOk = () => {
  window.localStorage.setItem("userId", form.userId);
  userId.value = form.userId;
  visible.value = false;
};
const initConnection = () => {
  connection.value.onopen = (event) => {
    console.log("🚀 ~ file: Test.vue:12 ~ event", event);
  };
  connection.value.onmessage = (event) => {
    console.log(event.data);
  };
};

const hasSubmit = ref(false);

const sendMessage = (message) => {
  // connection.value.send(message);
  submitAnswer();
};
const route = useRoute();
const question = ref(null);
const getById = async (id) => {
  const res = await getQuestionById({ id });
  question.value = res.data;
};

const submitAnswer = async () => {
  if (!value.value) {
    Message.error("请输入答案");
    return;
  }
  const data = {
    answer: value.value,
    questionId: question.value.id,
    userId: userId.value,
  };
  const res = await saveAnswer(data);
  if (res.success) {
    hasSubmit.value = true;
  }
};

onMounted(() => {
  const id = route.params.id;
  if (!userId.value) {
    visible.value = true;
  }
  if (id) {
    connection.value = new WebSocket(
      "ws://localhost:8080/socket/" + route.params.id
    );
    initConnection();

    getById(id);
  }
});
</script>

<style lang="scss" scoped></style>
